<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <img src="./assets/busLOGO.png" alt="logo">
        <div>办公工具箱</div>
      </el-header>
      <el-main>
        <nav-head></nav-head>
<!--        <router-view v-slot="{ Component }">-->
<!--          <transition name="el-zoom-in-top">-->
<!--            &lt;!&ndash;            <component :is="Component"/>&ndash;&gt;-->
<!--            <div :key="$route.path">-->
<!--              <component :is="Component"></component>-->
<!--            </div>-->
<!--          </transition>-->
<!--        </router-view>-->
        <router-view></router-view>
      </el-main>
      <el-footer>
        <div>Copyright © 2024 HamHamSpring</div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import NavHead from "@/components/index/NavHead.vue";

export default {
  name: "App",
  components: [NavHead,],
  created() {
    this.$router.push("/");
  }
}
</script>

<style lang="scss">
.el-header {
  width: 100%;
  height: 36px;
  background-color: #bae7ff;
  line-height: 36px;
  box-shadow: 0 0 10px 0 #c4c4c4;
  margin-bottom: 18px;

  img {
    display: inline-block;
    height: 30px;
    //vertical-align: middle;
    margin: 3px;
  }

  div {
    display: inline-block;
    vertical-align: top;
    padding-left: 10px;
  }
}

.el-main {
  //height: calc(100vh - 36px);
  padding: 0 20px 5px 20px;
}

.el-footer {
  height: 20px;
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}

//.fade-enter-active,
//.fade-leave-active {
//  transition: opacity 0.5s ease;
//}
//
//.fade-enter-from,
//.fade-leave-to {
//  opacity: 0;
//}
</style>
